<template>
  <div class="home-page">
    <!-- 
    <div class="title-wrap">
      <img class="title" :class="[activeClass]" src="../assets/images/p1_hygeian.png" />
    </div>
    <div class="inner-img"></div>
    <div class="tip" :class="[activeFontClass]">
      <div class="name">汉吉健康</div>
      <div class="p">致力于健康事业，为实现中国大健康，健康大中国的企业愿景、 助力提升中国人整体生活水平的目标不懈努力。</div>
    </div>
    -->
    <div class="p1_ft" :class="[activeClass]">
      <p class="p1">你的城市，需要我吗？ </p>
      <div class="contxt">
        <p class="p2" @click="show(9)">点此立即联系我们</p>
        <img src="../assets/images/next.png" alt="">
      </div>
    </div>

  </div>
</template>
<script>

export default {
  name: 'HomePage7',
  data() {
    return {
      activeClass: "",
      activeFontClass: ""
    }
  },
  mounted() {
    this.addAnimate();
  },
  methods: {
    show(index) {
      this.$emit('checkpage', index)
    },
    addAnimate() {
      this.activeClass = "display animate__animated animate__fadeInUp animate__slow";
      this.activeFontClass = "display animate__animated animate__fadeInDown animate__slow animate__delay-2s"
    },
    removeAnimate() {
      this.activeClass = "";
      this.activeFontClass = "";
    }
  }
}
</script>
<style lang="scss" scoped>
.home-page {
  width: 100%;
  height: 100vh;
  background-image: url("../assets/images/p7.png");
  background-size: cover;

  .p1_ft {

    text-align: center;
    padding-top: 237px;
    display: none;

    .p1 {
      width: 100%;
      font-size: 60px;
      font-family: Alibaba PuHuiTi;
      font-weight: 800;
      color: #FFFFFF;
    }

    .contxt {
      width: 300px;
      border: 1px solid #fff;
      margin: 0 auto;
      margin-top: 50px;
      cursor: pointer;
      border-radius: 10px;

      .p2 {
        display: inline-block;
        width: 200px;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #FFFFFF;
        padding: 20px 0;
      }

      img {
        display: inline-block;
        padding: 0 0 0 15px;
      }

      &:active {
        background-color: rgba($color: #000000, $alpha: 0.2);
      }
    }

  }

  .display {
    display: block !important;
  }

  .title-wrap {
    z-index: 2;
    position: absolute;
    top: 36%;
    left: 0;
    right: 0;

    .title {
      display: none;
      margin: 0 auto;
      width: 71.7%;
    }
  }

  .tip {
    display: none;
    z-index: 3;
    position: absolute;
    bottom: 140px;
    left: 0;
    right: 0;
    text-align: center;

    .name {
      font-size: 36px;
      font-weight: bold;
      color: #00AAB7;
    }

    .p {
      margin: 34px auto 0;
      width: 492px;
      font-size: 18px;
      color: #FFFFFF;
    }
  }
}
</style>
